<!--<link rel="stylesheet" type="text/css" href="css/gmail.css" xmlns="http://www.w3.org/1999/html">-->
<div id="gmail_panel" class="wp_fz_12">
    <div id="gmailTpl" class="gmailTpl">
        <div class="gmail_row">
            <div class="gmail_header" id="gmail_panel_top">
					Gmail
                <i id="gmail_panel_top_resize" class="main_common_f_13_13 right wp_mr_3 wp_mt_2 wp_gmail_hand" title="Expand"></i>
            </div>
        </div>
        <div id="gmail_view" class="gmail_body">
            <div class="gmail_min" id="gmail_min_view">
                <div class="top authorize center" style="display: none;">
                    <img src="imgs/gmail_signin.png"/>
                    <button type="button" class="k-button" id="gmail_login"> Sign in </button>
                    <div class="urltext">www.gmail.com</div>
                </div>
            </div>
            <div class="gmail_max" id="gmail_max_view"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/gmail.main.js"></script>

<script id="messageTemplate" type="text/x-kendo-template">
    <div id="gmail-list-header" class="gmail-message-header">
        <div data-bind="click:reply" title="Reply" id="gmailReply"></div>
        <div data-bind="click:replyAll" title="Reply to all" id="gmailReplyAll"></div>
        <div data-bind="click:forward" title="Forward" id="gmailForward"></div>
        <div id="gmailOpenTrash" title="Delete" data-bind="click:trash"></div>
        <div id="gmailUnread" title="Mark as Unread" data-bind="click:onUnread"></div>
    </div>
    <div class="gmail_layout_panel_body" style="overflow:auto;">
        <p style="padding:20px 0;width: 450px;" class="wp_fz_14">
            <span data-bind="text:subject" style="font-weight: bold;"></span>
        </p>
        <div data-bind="click:onStar,attr:{title:t_starred, class:labelIds}" style="position:absolute; top: 17px;right: 5px;width:16px;height:16px;cursor:pointer;margin-right:12px;"></div>
        <div class="messagebody">
            <div style="position: relative;" class="wp_fz_14">
                <div style="display: inline;margin-right: 20px;float: left;">
                    <div class="char circle" data-bind="html:char"></div>
                </div>
                <div style="width: 380px; float: left; margin-bottom: 20px;">
                    <p><span data-bind="html:from" style="font-weight: bold;"></span><span class="from_mail" data-bind="text:from_mail"></span></p>
                    <p class="to">to: <span data-bind="text:to"></span></p>
                    <p class="cc" data-bind="style:{display:showCC}">cc: <span data-bind="text:cc"></span></p>
                    <p class="date" data-bind="text:date"></p>
                </div>
            </div>
            <iframe id="iframepage" width="412" height="100%" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" data-bind="events:{load:iframe_load},attr:{srcdoc: content}"></iframe>
            <div data-template="attachments-template" data-bind="source:this"></div>
        </div>
    </div>
</script>

<script id='attachments-template' type="text/x-kendo-template">
    # for (var i = 0; i < Attachments.length; i++) { if(Attachments[i].headers["Content-ID"]) {continue;}#
        <p class="attachment text_overflow"><i class="attachment_icon"></i><a downtype="wp" href="#:Attachments[i].link#" title="#:Attachments[i].filename#" style="float: left;">#:gmailControler.parseLongFileName(Attachments[i].filename)#</a></p>
    # } #
</script>

<script id="gmail_error_template"  type="text/x-kendo-template">
    <div class="center wp_fz_16" style="width: 90%; background-color: white; text-align: center; vertical-align: middle; line-height: 20px;">
        This service is currently unavailable. Please close your browser and reopen myJabil to access your productivity tools. If the problem persists, please enter a service request in ServiceNow.
        </div>
</script>

<script id="gmail-list-content-template" type="text/x-kendo-template">
    <div id="gmail-list-header" class="gmail-list-header">
        <div data-bind="click:onCreate" id="gmailCreate" title="Compose"></div>
        <div class="wp_mt_12 wp_w_91 " style="float: left;position: relative;"><span class="wp_fz_14 wp_ml_21" data-bind="html:primary"></span></div>
        <div id="gmailOpen" title="Open Gmail in New tab" data-bind="click:onOpen"></div>
        <div id="gmailTrash" title="Delete" data-bind="click:onTrash, style:{opacity:trashOpacity, cursor:trashCursor}"></div>
        <div id="gmailUnread" title="Mark as Unread" data-bind="click:onUnread, style:{opacity:trashOpacity, cursor:trashCursor}"></div>
        <input type="hidden" data-bind="value:sort_by_date"/>
    </div>
    <div class="gmail_layout_panel" style="overflow:auto; height: 800px;">
        <div class="gmailist" data-template="gmail-list-template" data-bind="source:this"></div>
        <div type="button" class="more" style="display: none;" data-bind="click:onMore"> More </div>
        <div id="gmail_empty" class="center wp_fz_16" style="width: 100%; height: 100%; background-color: white; text-align: center; vertical-align: middle; line-height: 20px;display: none;">
            <div class = "center" style="width: 90%;">Your Primary inbox is empty. Personal messages and messages not in other folders will be shown here.</div>
        </div>
    </div>
</script>

<script id="gmail-list-template" type="text/x-kendo-template">
    <table cellpadding = "0" cellspacing="0" border="0" width="100%">
        #var headers, labels, subject, curstyle='', from, attlist, att_name_arr = [], showIcon = 'none', t_starred = 'Starred';#
        #for(var i=0, l = mailist.length;i < l;i++){#
        # headers = parseHeaders(mailist[i].payload.headers);labels = mailist[i].labelIds.join(' '); subject = headers.Subject ? headers.Subject : '(no subject)';#
        # t_starred = mailist[i].labelIds.indexOf('STARRED') > -1 ? 'Starred':'Not starred'#
        # from = headers.From.split('<').length > 0 ? headers.From.split('<')[0]:headers.From; curstyle = cur_gmid == mailist[i].id ? "summary_selected":"";#
        # attlist = getAttchList(mailist[i]); att_name_arr = []; for(var n =0, ln = attlist.length;n < ln; n++){att_name_arr.push(attlist[n].filename);} showIcon = att_name_arr.length > 0 ? 'block':'none';att_name_arr = att_name_arr.join(', ');#
        <tr>
            <td class="summary gmail_td_#:mailist[i].id# #:curstyle#">
                <div style="float:left;height:100%;padding-top:18px;padding-left: 3px;"><input type="checkbox" value="#: mailist[i].id #" data-bind="checked: selectist"/></div>
                <div style="float:left;width:220px;padding-left: 3px;color:gray;">
                    <p class="text-overflow left wp_w_155 wp_pl_5 wp_fz_14 #: labels.replace(/STARRED/ig,'') #" title="#: from #" style="cursor: pointer;color:black;" data-bind="click:onShowMail" data-gmid="#: mailist[i].id #">#: from #</p>
                    <div class="right date #: labels.replace(/STARRED/ig,'') #" style="margin-right:10px;">#: kendo.toString(new Date(headers.Date), 'MMM d') #</div>
                    <p class="text-overflow left wp_w_155 wp_pl_5 " title="#: subject #" style="cursor: pointer;margin-top: 3px;line-height: 12px;" data-bind="click:onShowMail" data-gmid="#: mailist[i].id #"><span style="font-weight: bolder;color: black;">››&nbsp;&nbsp;</span>#: subject #</p>
                    <div class="right" title="#:att_name_arr #" data-bind="click:onShowMail" data-gmid="#: mailist[i].id #" style="width: 16px;height: 16px;cursor:pointer;margin-right:12px;display:#:showIcon#;background: no-repeat url(//ssl.gstatic.com/mail/sprites/general_black-16bf964ab5b51c4b7462e4429bfa7fe8.png) 0 -256px;"></div>
                    <p class="text-overflow left subject" title="#: mailist[i].snippet #" style="cursor: pointer; padding:0 5px; width:180px; margin-top: 2px;" data-bind="click:onShowMail" data-gmid="#: mailist[i].id #">#: mailist[i].snippet #</p>
                    <div class="right UN_STAR  #: labels #" title="#:t_starred #" data-bind="click:onStar" data-gmid="#: mailist[i].id #" style="width:16px;height:16px;cursor:pointer;margin-right:12px;"></div>
                </div>
            </td>
        </tr>
        # }#
    </table>
</script>

<script id="gmail-edit-template" type="text/x-kendo-template">
    <div id="gmail-header" style="width:100%;height: 36px; overflow: hidden; z-index: 3;top:0; background-color:rgb(240, 240, 240);">
        <div class="wp_fz_14 wp_ml_27 wp_mt_12" data-bind="text:action"></div>
    </div>
    <div class="gmail_layout_panel_body attchTpl" style="overflow:auto;background-color: rgb(240, 240, 240);padding:0 27px;">
        <p style="line-height: 25px;margin-top: 5px;height: 25px;"><span class="pname">To</span>
            <input class="pinput pinputs" type="text" data-msg_field="to" data-account="to" data-bind="value: to" />
        </p>
        <p style="line-height: 25px;height: 25px;"><span class="pname">Cc</span>
            <input class="pinput pinputs" type="text" data-msg_field="cc" data-bind="value: cc" />
        </p>
        <p style="line-height: 25px;height: 25px;"><span class="pname">Bcc</span>
            <input class="pinput pinputs" type="text" data-msg_field="bcc" data-bind="value: bcc" />
        </p>
        <p style="line-height: 25px;height: 25px;"><span class="pname">Subject</span>
            <input class="k-input pinput" style="height: 18px;" type="text" data-msg_field="subject" data-bind="value: subject"/>
        </p>
        <textarea id="ta_gmail_compose" data-role="editor" data-value-update="keyup" data-bind="value: content" data-tools='[
        "bold", "italic", "underline", "strikethrough", "foreColor", "subscript", "superscript", "insertOrderedList", "insertUnorderedList", "justifyLeft", "justifyCenter", "justifyRight", "viewHtml", "createLink"
            ]' ></textarea>
        <form id="gmail_file_form" class="wp_mt_5" style="text-align: left;">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="90%"><input class="filename" type="text" readonly data-bind="value:filename" width="100%"/> </td>
                    <td width="5%">
                        <input type="file" data-role="upload"
                       data-showFileList="false"
                       data-multiple = "true"
                       data-localization="{'select':'Browse'}"
                       data-bind="events:{select: onFileChange}"/>
                    </td>
                    <td width="5%">
                        <div class="k-widget k-upload k-header k-upload-sync k-upload-empty">
                            <div class="k-button k-upload-button" style="padding-top:0;margin-right:0;margin-left:0;">
                                <button type="button" data-bind="enabled:enableAttach, click:onAttach, style:{cursor:attachCursor}" class="k-button btn-attach">Attach</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <div class="gmailist" style="overflow:auto;" data-template="edit-attachments-template" data-bind="source:this"></div>
        </form>
        <center style="padding:20px 0">
            <button type="button" data-bind="click:onSend" class="k-button" style="float: right;">Send</button>
            <button type="button" data-bind="click:onSaveToDrafts" class="k-button" style="width: 90px;margin: 0 10px; float: right;">Save Draft</button>
            <button type="button" data-bind="click:onCancel" class="k-button" style="background-color: darkgray !important; width: 90px; float: right;">Discard Draft</button>
        </center>
    </div>
</script>

<script id='edit-attachments-template' type="text/x-kendo-template">
    <ul>
        # for (var i = 0; i < attaches.length; i++) { #
        <li class="compose_attachment" title="#:attaches[i].filename#"><span style="margin-right: 5px;">#:gmailControler.parseLongFileName(attaches[i].filename)#</span>
            <a class="delete" data-bind="click:onDelete" href="javascript:void(0);" data-att_index="#:i#" class='delete' title="Delete">x</a>
        </li>
        # } #
    </ul>
</script>

<script type="text/x-kendo-template" id="gmail-instert-image-template">
    <div>
        <div class="k-button k-upload-button"  style="background-color: rgb(240, 240, 240) !important; width: 24px; height: 24px;position: relative;">
            <i class="k-tool-icon k-insertImage" style="position:absolute; top:1px;left:0;width: 24px; height: 24px; line-height:24px;">&nbsp;&nbsp;</i>
            <input name="files" title="Insert local image" type="file" accept="image/*" onchange = 'onSelect(this);' autocomplete="off">
        </div>
    </div>
</script>